<template>
  <div>
    <a-modal
      v-model="visible"
      :title="title"
      :width="1400"
      :footer="null"
      @cancel="onCancel"
    >
      <a-spin :spinning="loading">
        <v-chart :forceFit="true" :height="450" :data="data" :scale="scale" :padding="padding">
          <v-tooltip :shared="true"/>
          <v-axis dataKey="year" :label="label" :tickLine="tickLine"></v-axis>
          <v-interval position="year*value" :label="labelInterval" :opcaity="1"></v-interval>
        </v-chart>
<!--        <v-chart height="450" :forceFit="true" :data="data" :scale="scale">-->
<!--          <v-tooltip :shared="true" />-->
<!--          <v-axis />-->
<!--          <v-interval position="year*value" :label="label" :opcaity="1"></v-interval>-->
<!--&lt;!&ndash;          <v-bar position="year*value" />&ndash;&gt;-->
<!--&lt;!&ndash;          <v-line position="year*value" />&ndash;&gt;-->
<!--&lt;!&ndash;          <v-point position="year*value" shape="circle" />&ndash;&gt;-->
<!--        </v-chart>-->
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
  import { getChart } from '@/api/adviser'

  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      businessId: {
        type: String,
        default: ''
      }
    },
    name: 'BusinessChart',
    data () {
      return {
        loading: false,
        visible: true,
        data: [],
        padding: [20, 20, 50, 50],
        label: {
          textStyle: {
            fill: '#aaaaaa'
          }
        },
        tickLine: {
          alignWithLabel: false,
          length: 0
        },
        labelInterval: ['value', {
          useHtml: true,
          htmlTemplate: function htmlTemplate (text, item) {
            var a = item.point
            return '<span class="g2-label-item"><p class="g2-label-item-value">' + a.value + '</p></div>'
          }
        }],
        scale: [
          {
            dataKey: 'value',
            alias: '业务量（件）'
          },
          {
            dataKey: 'year'
          }
        ]
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        this.loading = true
        getChart(this.businessId).then(res => {
          this.data = res.result.data
        }).finally(() => {
          this.loading = false
        })
      },
      onCancel () {
        this.visible = false
        this.$emit('cancel', this.visible)
      }
    }
  }
</script>

<style scoped>

</style>
